<template>
    <view class='tab-container'>
        <view class="search">
            <image src="@/static/icon-search.png" class="icon-search"></image>
            <input type="text" placeholder="请输入相关内容" class="text"/>
        </view>
		<view class='tab-one-list'>
			<view>时令类</view>
		    <block v-for="(item,index) in levelOneList" :key="index">
		        <view @click="clickLevelOne" :data-index="index" :class="levelOneActiveIndex==index?'active': ''">{{item.title}}</view>
		    </block>
		</view>
        <view class='tab-two-list'>
            <block v-for="(item,index) in pres" :key="index">
                <view @click="clickLevelTwo" :data-index="index" :class="levelTwoActiveIndex==index?'active': ''">{{item.group}}</view>
            </block>
        </view>
        <view>
            <view class='tab-detail clear'>
                <block v-for="(item,index) in goods" :key="index">
                    <view class='tab-item' data-goodsId="item.id">
                        <image :src='item.img'></image>
                        <view class="name">{{item.name}}</view>
                    </view>
                </block>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				// 一级选中的下标
				levelOneActiveIndex : 0,
				// 二级选中的下标
				levelTwoActiveIndex : 0,
				levelOneList : [
					{
						id : 1,
						title : '分类1',
						levelTwoList : [
							{
								id : 100,
								group : '分类1-1',
								listInfo : [
									{
										name : '分类1-1-1',
										img : '/static/userPic.png'
									},
									{
										name : '分类1-1-2',
										img : '/static/userPic.png'
									},
									{
										name : '分类1-1-3',
										img : '/static/userPic.png'
									}
								]
							},
							{
								id : 101,
								group : '分类1-2',
								listInfo : [
									{
										name : '分类1-2-1',
										img : '/static/userPic.png'
									},
									{
										name : '分类1-2-2',
										img : '/static/userPic.png'
									},
									{
										name : '分类1-2-3',
										img : '/static/userPic.png'
									}
								]
							},
							{
								id : 103,
								group : '分类1-3',
								listInfo : [
									{
										name : '分类1-3-1',
										img : '/static/userPic.png'
									},
									{
										name : '分类1-3-2',
										img : '/static/userPic.png'
									},
									{
										name : '分类1-3-3',
										img : '/static/userPic.png'
									}
								]
							}
						]
					},
					{
						id : 2,
						title : '分类2',
						levelTwoList : [
							{
								id : 104,
								group : '分类2-1',
								listInfo : [
									{
										name : '分类2-1-1',
										img : '/static/userPic.png'
									},
									{
										name : '分类2-1-2',
										img : '/static/userPic.png'
									},
									{
										name : '分类2-1-3',
										img : '/static/userPic.png'
									}
								]
							},
							{
								id : 105,
								group : '分类2-2',
								listInfo : [
									{
										name : '分类2-2-1',
										img : '/static/userPic.png'
									},
									{
										name : '分类2-2-2',
										img : '/static/userPic.png'
									},
									{
										name : '分类2-2-3',
										img : '/static/userPic.png'
									}
								]
							},
							{
								id : 106,
								group : '分类2-3',
								listInfo : [
									{
										name : '分类2-3-1',
										img : '/static/userPic.png'
									},
									{
										name : '分类2-3-2',
										img : '/static/userPic.png'
									},
									{
										name : '分类2-3-3',
										img : '/static/userPic.png'
									}
								]
							}
						]
					
					},
					{
						id : 3,
						title : '分类3',
						levelTwoList : [
							{
								id : 107,
								group : '分类3-1',
								listInfo : [
									{
										name : '分类3-1-1',
										img : '/static/userPic.png'
									},
									{
										name : '分类3-1-2',
										img : '/static/userPic.png'
									},
									{
										name : '分类3-1-3',
										img : '/static/userPic.png'
									}
								]
							},
							{
								id : 108,
								group : '分类3-2',
								listInfo : [
									{
										name : '分类3-2-1',
										img : '/static/userPic.png'
									},
									{
										name : '分类3-2-2',
										img : '/static/userPic.png'
									},
									{
										name : '分类3-2-3',
										img : '/static/userPic.png'
									}
								]
							},
							{
								id : 109,
								group : '分类3-3',
								listInfo : [
									{
										name : '分类3-3-1',
										img : '/static/userPic.png'
									},
									{
										name : '分类3-3-2',
										img : '/static/userPic.png'
									},
									{
										name : '分类3-3-3',
										img : '/static/userPic.png'
									}
								]
							}
						]
					}
				],
				// 二级分类列表
                pres: [],
				// 商品列表
				goods: [],
            }
        },
        methods: {
			/**
			 * 切换一级分类
			 */
			clickLevelOne: function(e){
				this.levelOneActiveIndex = e.currentTarget.dataset.index;
				this.pres = this.levelOneList[this.levelOneActiveIndex].levelTwoList;
				this.levelTwoActiveIndex = 0;
				this.goods = this.pres[0].listInfo;
			},
			/**
			 * 切换二级分类
			 */
            clickLevelTwo: function(e) {
				this.levelTwoActiveIndex = e.currentTarget.dataset.index;
				this.goods = this.pres[this.levelTwoActiveIndex].listInfo;
			},
        },
		onLoad() {
			this.pres = this.levelOneList[0].levelTwoList;
			this.goods = this.pres[0].listInfo;
		}
    }
</script>

<style>
page{
    background: #d6e8dc;
}
/* tab选项卡 */
.search{
    position: relative;
    margin: 30rpx;
}
.search .text{
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background: #FFFFFF;
    border-radius: 10rpx;
    color: #000000;
    font-size: 30rpx;
    padding: 0 20rpx 0 70rpx;
    box-sizing: border-box;
}
.icon-search{
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    left: 20rpx;
    top: 50%;
    margin-top: -20rpx;
}
.tab-container {
    position: relative;
}

.tab-one-list{
	border: 0rpx solid red;
	display: flex;
	text-align: center;
	height: 80rpx;
	background: #F8F8FF;
}

.tab-one-list>view{
	border: 0rpx solid blue;
	flex-grow: 1;
	height: 100%;
	line-height: 80rpx;
}

.tab-two-list {
    width: 200rpx;
    height: 550rpx;
	background: #F8F8FF;
}

.tab-two-list>view {
    width: 100%;
    height: 110rpx;
    line-height: 110rpx;
    text-align: center;
    font-size: 32rpx;
}

.noclick {
    background: #f9f9f9;
    color: #333;
}

.click {
    background: #fff;
    color: #87cefa;
}

.tab-detail {
    position: absolute;
    top: 100rpx;
    left: 200rpx;
    width: 550rpx;
    box-sizing: border-box;
    background: #fff;
}

/* 商品详情 */

.tab-item {
    width: 180rpx;
    height: 180rpx;
    text-align: center;
    font-size: 30rpx;
    float: left;
}

.tab-item .name {
	width: 100%;
	font-size: 32rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tab-item>image {
    width: 125rpx;
    height: 125rpx;
    display: block;
    margin: 0 auto;
}

.active{
	background: #5AD596;
	color: #fff !important;
}

</style>
